<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="挂号单ID" prop="postCode">
        <el-input
          v-model="queryParams.RegisterId"
          placeholder="请输入挂号单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">读取IC卡</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card" style="color: red">
      <div class="text item" >
        挂号单号: {{charge.regId}} 医生姓名:{{charge.doctorName}}
      </div>
      <div class="text item">
        患者姓名:{{charge.patientName}} 患者id:{{charge.patientId}}
      </div>
      <div class="text item">
        所属科室: {{charge.regName }}  诊断信息:{{charge.caseMsg}}
      </div>
      <div class="text item">
        就诊时间: {{charge.regTime}} 诊断建议{{charge.caseSuggest}}
      </div>
    </el-card>

    <el-collapse v-model="activeNames" @change="handleChange">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['drugs:supplier:add']"
          >全选
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdate"
            v-hasPermi="['drugs:supplier:edit']"
          >取消全选
          </el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"

            @click="durgCharge"
            v-hasPermi="['drugs:supplier:remove']"
          >现金
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <!--支付宝缴费弹框-->
          <el-button type="text" @click="dialogVisible = true">支付宝缴费</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <!--            :before-close="handleClose"-->
            <span>
              <el-table v-loading="loading" :data="postList">
 <el-table-column label="总金额（元）" align="center" prop="totalPrice"/>
            </el-table>
              <b> 请扫码缴费</b>
            </span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
          </el-dialog>

        </el-col>

      </el-row>
      <el-collapse-item title="【检查处方】" name="1">
        <div>

          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>

            <el-table-column
              fixed
              prop="durgId"
              label="序号"
              width="150">
            </el-table-column>

            <el-table-column
              prop="durgName"
              label="药品名称"
              width="120">
            </el-table-column>

            <el-table-column
              prop="drugNumber"
              label="数量"
              width="120">
            </el-table-column>

            <el-table-column
              prop="durgOtcPrice"
              label="单价(元)"
              width="120">
            </el-table-column>
            <el-table-column
              prop="sum"
              label="总额"
              width="120">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="服用备注"
              width="120">
            </el-table-column>

            <el-table-column label="状态" align="center" prop="status" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.charge_drug_status" :value="scope.row.registerStatus"/>
              </template>
            </el-table-column>
          </el-table>

        </div>

      </el-collapse-item>

    </el-collapse>
  </div>
</template>

<script>
    import {listRegister} from "@/api/collect/charge";
    import {listDoctorRegister} from "@/api/collect/charge";
    import {pay} from "@/api/collect/charge";

    export default {

        name: "Post",
        dicts: ['charge_drug_status'],
        data() {
            return {
                dialogVisible: false,//弹窗
                // 遮罩层
                loading: false,
                activeNames: ['1'],
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 岗位表格数据
                postList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 状态数据字典
                statusOptions: [],

                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    regId:undefined,
                    patientName:undefined,
                    patientId:undefined,
                    regName:undefined,
                    regTime:undefined,
                  status:"1",
                    doctorName:undefined,
                    caseInf:undefined,
                    caseMsg:undefined,
                    caseSuggest:undefined,
                    registerStatus:undefined
                },

                // 表单参数
                form: {},
                charge: {},
                tableData: []
                // 表单校验
                // rules: {
                //     name: [
                //         {required: true, message: "供应商名称不能为空", trigger: "blur"}
                //     ],
                //     boss: [
                //         {required: true, message: "联系人不能为空", trigger: "blur"}
                //     ],
                //     phone: [
                //         {required: true, message: "手机号不能为空", trigger: "blur"}
                //     ],
                //     card: [
                //         {required: true, message: "银行卡号不能为空", trigger: "blur"}
                //     ],
                //     address: [
                //         {required: true, message: "地址不能为空", trigger: "blur"}
                //     ]
                // }
            };
        },
        created() {
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
        },

        methods: {


            handleClick(row) {
                console.log(row);
            },
            /** 查询供应商列表 */
            getList() {
                this.loading = true;
                listRegister(this.queryParams).then(response => {
                    this.charge = response.data;
                });

                listDoctorRegister(this.queryParams).then(response => {
                    this.tableData = response.rows;
                });

            },
            // 供应商状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            //  取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            //  表单重置
            reset() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    boss: undefined,
                    phone: undefined,
                    card: undefined,
                    address: undefined,
                    postSort: 0,
                    status: "0",
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            handleChange(val) {
                console.log(val);
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.durgId);
                this.single = selection.length != 1
                this.multiple = !selection.length
            },

            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            updateSup(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addSup(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 现金支付操作 */
            durgCharge(row) {
                const id = row.id || this.ids;
                const patientId  = this.charge.patientId;
                console.log(this.charge)
                this.$confirm('用户是否"' + id + '"已经支付金额?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    pay(id,patientId).then(response => {
                        this.pay = response.rows;
                        console.log(id)
                    });
                }).then(() => {
                    this.getList();
                    this.msgSuccess("支付成功");
                })
            },
        },
    };
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
